<template>
  <view class="container">
    <view class="tabs-box flex">
      <view
        @click="tabClick(item, index)"
        :class="{ active: activeTab == index }"
        v-for="(item, index) in tabs"
        :key="index">
        {{ item.name }}
      </view>
    </view>
    <view class="list-box">
      <scroll-view
        :style="{ height: scrollHeight }"
        scroll-y="true"
        refresher-enabled="true"
        :refresher-threshold="50"
        lower-threshold="200"
        @refresherpulling="onPulling"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @refresherabort="onAbort"
        @scrolltolower="onScrolltolower">
        <view v-if="!list.length" class="empty flex">
          <image src="/static/common/empty-msg.png" mode=""></image>
          <view class="text">暂无消息</view>
          <view @click="goBack" class="btn">返回上级</view>
        </view>
        <u-swipe-action
          v-else
          :index="index"
          v-for="(item, index) in list"
          :key="index"
          @click="actionClick"
          :options="options">
          <view class="list-item" :class="{ unread: index == 1 }">
            <view class="flex top">
              <text class="title">系统消息：全选版本聚省上线啦全选版本聚省上线啦全选版本聚省上线啦！</text>
              <text class="date">2024-12-12</text>
            </view>
            <view class="msg">全新版本现已上架邀您体验全新版本现已上架邀您体验全新版本现已上架邀您体验。</view>
          </view>
        </u-swipe-action>
      </scroll-view>
    </view>
    <view class="bottom-box flex" :style="{ paddingBottom: bottomArea }">
      <view class="item flex">
        <image src="/static/common/clean-icon.png" mode=""></image>
        <text>全部已读</text>
      </view>
      <view class="line"></view>
      <view class="item flex">
        <image src="/static/common/clear-icon.png" mode=""></image>
        <text>清空消息</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const bottomArea = ref('0px');
const scrollHeight = ref('');
onLoad(() => {
  const { safeAreaInsets } = uni.getWindowInfo();
  bottomArea.value = safeAreaInsets.bottom + 'px';
  scrollHeight.value = `calc(100vh - ${safeAreaInsets.bottom + 100}px)`;
});

const activeTab = ref(0);
const tabs = ref([{ name: '全部消息' }, { name: '系统通知' }, { name: '粉丝消息' }, { name: '收益消息' }]);
const tabClick = (item, index) => {
  console.log(item, index);
  if (activeTab.value == index) return;
  activeTab.value = index;
  list.value = [];
  setTimeout(() => {
    list.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  }, 50);
};

const list = ref([]);
const options = ref([
  {
    text: '删除',
    style: {
      backgroundColor: '#ff3d3b',
    },
  },
]);
const actionClick = (index, index1) => {
  if (index1 == 1) {
    list.value.splice(index, 1);
  } else {
    list.value[index].show = false;
  }
};
const onPulling = () => {
  console.log('onPulling');
};
const onRefresh = () => {
  console.log('onRefresh');
};
const onRestore = () => {
  console.log('onRestore');
};
const onAbort = () => {
  console.log('onAbort');
};
const onScrolltolower = () => {
  console.log('onScrolltolower');
};
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
:deep(.u-swipe-action) {
  background: transparent !important;
}
:deep(.u-swipe-del) {
  margin-bottom: 12px;
}
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  .tabs-box {
    flex-wrap: nowrap;
    overflow: scroll;
    padding: 21px 12px 12px;
    position: sticky;
    top: 0;
    background-color: #f8f8f8;
    z-index: 99;
    &::-webkit-scrollbar {
      display: none;
    }
    view {
      flex-shrink: 0;
      height: 26px;
      padding: 0 11px;
      line-height: 24px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      margin-right: 13px;
      border-radius: 15px;
      background-color: #fff;
      &.active {
        color: #fff;
        background: #ff3d3b;
      }
    }
  }
  .list-box {
    padding: 0 12px;
    .empty {
      flex-direction: column;
      padding-top: 15vh;
      image {
        width: 120px;
        height: 120px;
      }
      .text {
        font-weight: 500;
        font-size: 14px;
        color: #333;
        text-align: center;
        margin: 20px 0 32px;
      }
      .btn {
        width: 150px;
        height: 50px;
        border-radius: 34px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #ff0309;
        color: #ff0309;
        font-weight: 500;
        font-size: 16px;
      }
    }
    .list-item {
      background-color: #fff;
      border-radius: 12px;
      margin-bottom: 12px;
      padding: 18px 12px;
      position: relative;
      &.unread {
        &::after {
          content: '·';
          color: #ff0309;
          font-size: 22px;
          font-weight: bolder;
          position: absolute;
          top: -4px;
          right: 10px;
        }
      }
      .top {
        justify-content: space-between;
        .title {
          color: #333333;
          font-weight: 500;
          font-size: 14px;
          width: 70vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .date {
          font-weight: 400;
          font-size: 10px;
          color: #999999;
        }
      }
      .msg {
        font-weight: 400;
        font-size: 12px;
        color: #666;
        margin-top: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100vw - 48px);
      }
    }
  }
  .bottom-box {
    background-color: #fff;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .item {
      height: 44px;
      image {
        width: 20px;
        height: 20px;
        margin-right: 12px;
      }
      text {
        font-size: 14px;
        color: #000;
        font-weight: 400;
      }
    }
    .line {
      height: 6px;
      background: #ff0309;
      width: 1px;
      border-radius: 10px;
      margin: 0 30px;
    }
  }
}
</style>
